<script setup lang="ts">
import dayjs from 'dayjs'
import { PayRecordApi } from '@/apis'
import type { TableInstanceColumns } from '@/components/ProTable/type'
import { useDownload, useForm, useTable } from '@/hooks'
import { formatMoney } from '@/utils/common'

defineOptions({ name: 'RefundRecordList' })

const router = useRouter()

const { form, resetForm } = useForm<any>({
  dateFrom: dayjs().format('YYYY-MM-DD'),
  dateTo: dayjs().format('YYYY-MM-DD'),
  finAccountId: undefined,
  studentId: undefined,
})

const {
  tableData,
  loading,
  pagination,
  search: searchData,
} = useTable(pagination => PayRecordApi.getRefundRecordPage({ ...form, ...pagination }), { immediate: false })

const columns: TableInstanceColumns[] = [
  { title: '序号', width: 66, align: 'center', fixed: 'left', render: ({ rowIndex }) => h('span', {}, rowIndex + 1 + (pagination.current - 1) * pagination.pageSize) },
  { title: '退款单号', dataIndex: 'id', fixed: 'left', width: 200 },
  { title: '退款时间', dataIndex: 'refundTime', width: 180 },
  { title: '学生信息', dataIndex: 'studentInfo', slotName: 'studentInfo', width: 120 },
  { title: '班级信息', dataIndex: 'classInfo', slotName: 'classInfo', align: 'left', width: 360 },
  { title: '主讲老师', dataIndex: 'leadTeacherName', slotName: 'leadTeacherName', width: 120 },
  { title: '退款金额', dataIndex: 'refundPrice', slotName: 'refundPrice', align: 'right', width: 120 },
  { title: '退款账户', dataIndex: 'payAccountId', slotName: 'payAccountId', width: 120 },
  { title: '三方单号', dataIndex: 'outTradeNo', width: 180, render: ({ record }) => record.outTradeNo || '-' },
  { title: '创建人', dataIndex: 'createUserName', width: 120 },
  { title: '订单号', dataIndex: 'orderId', slotName: 'orderId', width: 210 },
]

// 班级详情
const toClassDetail = (row) => {
  router.push({ path: '/education/class/detail', query: { id: row.classId } })
}

const toOrderDetail = (row) => {
  router.push({ path: '/shop/enrollment/order/detail', query: { id: row.orderId } })
}

const summary = ref<PayRecordApi.RefundRecordSummaryResp>({
  totalCount: 0,
  totalRefundPrice: 0,
})

const search = async () => {
  searchData()
  summary.value = await PayRecordApi.getRefundRecordSummary(form)
}

const onExportExcel = async () => {
  useDownload(() => PayRecordApi.exportRefundRecord(form))
}

watch(form, () => search())
onMounted(() => search())
</script>

<template>
  <ProPage title="退款明细查询">
    <template #title-right>
      <div class="ml-100px flex">
        <StatisticsItem tip="退款数量" icon="count" unit="笔" :count="summary.totalCount" />
        <StatisticsItem tip="退款总额" icon="count" unit="元" count-color="#ff7d00" :count="formatMoney(summary.totalRefundPrice)" />
      </div>
    </template>
    <ProTable
      :data="tableData"
      :columns="columns"
      :loading="loading"
      :pagination="pagination"
      @refresh="search"
    >
      <template #toolbar-left>
        <a-space>
          <RangePicker v-model:from="form.dateFrom" v-model:to="form.dateTo" :time="false" />
          <AccountSelect v-model="form.finAccountId" placeholder="退款账户" class="min-w-260px" />
        </a-space>
      </template>
      <template #toolbar-right>
        <a-button type="text" size="medium" @click="onExportExcel">
          <template #icon>
            <icon-download />
          </template>
          <span>导出</span>
        </a-button>
      </template>
      <template #studentInfo="{ record }">
        {{ record.student.name }}
      </template>
      <template #classInfo="{ record }">
        <a-tooltip :content="record.classInfo.name">
          <a-link class="px-0!" @click="toClassDetail(record)">
            <span class="w-348px truncate text-align-left">{{ record.classInfo.name }}</span>
          </a-link>
        </a-tooltip>
        <!-- <a-tag class="ml-1 w-40px!" color="green" size="small">
            {{ item.lessonIndexes.length }}节
          </a-tag> -->
        <!-- <CellClassInfo :id="record.classInfo.id" :is-link="false" :name="record.classInfo.name" :lead-teacher-name="record.classInfo.leadTeacherName" :assist-teacher-name="record.classInfo.assistTeacherName" /> -->
      </template>
      <template #leadTeacherName="{ record }">
        {{ record.classInfo.leadTeacherName }}
      </template>
      <template #refundPrice="{ record }">
        <span class="text-#ff7d00 font-500">
          {{ formatMoney(record.refundPrice) }}
        </span>
      </template>
      <template #payAccountId="{ record }">
        {{ record.finAccount.name }}
      </template>
      <template #orderId="{ record }">
        <a-link @click="toOrderDetail(record)">
          {{ record.orderId }}
        </a-link>
      </template>
    </ProTable>
  </ProPage>
</template>

<style lang="less" scoped></style>
